<template>
    <view class="overall">
        <view class="title">
            <view class="name">专家榜</view>
        </view>
        <view class="content">
            <view class="branch" v-for="(item, index) in list" :key="index">
                <view class="item">{{item.name}}</view>
                <view class="physician" v-if="doctor[index]?.length > 0">
                    <view v-for="(items, id) in doctor[index]" :key="id" @click="find(item,items)">
                        <image :src="apiUrl + items.avatar" mode=""></image>
                        <view>{{items.name}}</view>
                    </view>
                </view>
                <wd-status-tip image-size="40" v-else image="content" tip="暂无内容" />
            </view>
        </view>
        <!-- 底部导航栏 -->
        <view class="bottom">
            <view class="bottom-item" @click="goto">
                <image alt="首页" src="/static/home.png"/>
                <text>首页</text>
            </view>
            <view class="bottom-item" @click="hospital">
                <image alt="医院信息" src="/static/message.png"/>
                <text>医院信息</text>
            </view>
            <view class="bottom-item" @click="family">
                <image alt="专家榜" src="/static/doctorAfter.png" />
                <text style="color: #00DACA;">专家榜</text>
            </view>
            <view class="bottom-item" @click="can">
                <image alt="消息" src="/static/icon4.png"/>
                <text>消息</text>
            </view>
            <view class="bottom-item" @click="my">
                <image src="/static/mine.png" alt="我的" />
                <text>我的</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { lists, details, card } from '@/api/index.js';
import { BASE_API_URL } from '@/utils/config'; // 导入配置

const list = ref([]);
const doctor = ref([]);
// 定义计算属性处理图片URL前缀
const apiUrl = computed(() => BASE_API_URL);

// 获取科室列表
function fetchDepartments() {
    lists({}).then(res => {
        list.value = res.data[0].childrens;
        console.log('科室列表:', res.data);

        // 延迟获取医生信息，确保列表渲染完成
        setTimeout(() => {
            Promise.all(list.value.map(item => {
                return details({ depart_id: item.id }).then(res => {
                    console.log(`科室${item.name}的医生列表:`, res.data);
                    return res.data;
                });
            })).then(results => {
                doctor.value = results;
            });
        }, 500);
    });
}

// 初始化数据
fetchDepartments();

// 获取用户信息（保留，但不再用于判断跳转）
const cardInfo = ref([]);
const userInfo = ref([]);

function fetchUserInfo() {
    uni.getStorage({
        key: 'user',
        success: function (res) {
            console.log('用户信息:', res.data);
            userInfo.value = res.data;
            
            // 获取就诊卡信息
            if (res.data) {
                card({
                    user_id: res.data.id,
                }).then(res => {
                    console.log('就诊卡信息:', res.data);
                    if (res.data && res.data.length > 0) {
                        // 找到默认就诊卡
                        const defaultCard = res.data.find(item => item.status === 1);
                        if (defaultCard) {
                            cardInfo.value = defaultCard;
                            console.log('默认就诊卡:', cardInfo.value);
                        }
                    }
                });
            }
        }
    });
}

fetchUserInfo();

// 点击医生卡片
function find(one, tom) {
    console.log('点击的医生:', tom);
    
    // 存储科室信息
    uni.setStorage({
        key: 'doctor',
        data: one,
        success: function () {
            console.log('科室数据存储成功');
        }
    });
    
    // 存储医生信息
    uni.setStorage({
        key: 'details',
        data: tom,
        success: function () {
            console.log('医生数据存储成功');
        }
    });
    
    // 直接跳转页面，不检查就诊卡
    uni.navigateTo({
        url: '/pages/homepage/homepage'
    });
}

// 底部导航栏方法
const goto = () => {
    // 首页
    uni.redirectTo({
        url: '/pages/home/home'
    });
};

const hospital = () => {
    // 医院信息
	uni.redirectTo({
	    url: '/pages/information/information'
	});
};

const my = () => {
    // 我的
	uni.redirectTo({
	    url: '/pages/personal/personal'
	});
};
</script>

<style scoped>
.overall {
    width: 100%;
    min-height: 100vh;
    background-color: #F8F9FA;
}

.title {
    width: 100%;
    height: 180rpx;
    background-color: #00DACA;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    font-size: 42rpx;
    font-weight: bold;
    position: fixed;
    top: 0;
}

.name {
    padding-top: 60rpx;
}

.content {
    width: 100%;
    margin-top: 180rpx;
    padding-bottom: 200rpx;
}

.branch {
    padding: 10rpx 0;
}

.branch image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10000rpx;
    margin-bottom: 15rpx;
    border: 1rpx #7E8883 solid;
}

.physician {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.physician>view {
    width: 33.3%;
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.physician>view>view {
    margin-top: 10rpx;
}

.item {
    margin-top: 10rpx;
    padding-bottom: 10rpx;
    font-weight: bold;
    font-size: 28rpx;
    margin-left: 40rpx;
}

/* 底部导航栏 */
.bottom {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e6e6e6;
}

.bottom-item {
    text-align: center;
    font-size: 12px;
    color: #7d7d7d;
}

.bottom-item image {
    width: 30px;
    height: 30px;
    vertical-align: middle;
	object-fit: cover;
}

.bottom-item text {
    display: block;
    margin-top: 5px;
}
</style>    